<template>
	<image src="../../static/image/volunteer/bg.png" mode="widthFix" style="width: 100%; position: relative;"></image>
	<view class="flex-row" style="width: 100%; height:100px;margin-top:-162px; position: absolute;align-items: center;">
		<image src="../../static/image/volunteer/home.png" style="width: 35px; height:38px; margin-left: 40px;"
			class="margin-right-sm">
		</image>
		<view style="margin-left: 10px;">
			<view class="text-lg text-white text_1_ellipsis" style="">{{team.teamName}}</view>
			<view class="text-lg text-white margin-top-xs">志愿者数量：{{team.volunteerCount}}人</view>
		</view>
	</view>
	<view
		style="width: 100%;height: 1000px; background-color:#fff;margin-top: -40px;border-radius:10px 10px 0px 0px; position: absolute;padding: 20px;margin-bottom: 50px;">
		<view style="width: 100%; padding: 10px 0;">
			<view style="background-color: #F5F5F5;width: 100%;height: 35px;border-radius: 20px;display: flex;">
				<uni-icons style="margin-left: 5px; line-height: 35px;" type="search" color="red" size="26"></uni-icons>
				<input v-model="param.volunteerName"
					style="margin-left: 10px;height:35px; font-size: 14px; align-items: center;" placeholder="请输入志愿者姓名"
					@confirm="getList" @clear="cancel_search" />
			</view>
		</view>
		<view class="second flex-row-bt text-df" style="">
			<view></view>
			<view style="display: flex; margin-left: auto" class="">
				<view v-for="(item,index) in open" :key="index" class=" margin-left-xs flex-row"
					@click="change_select(index)">
					<view :class="{'theme-color':item.isAsc}">{{item.name}}</view>
					<view>
						<view v-if="item.isAsc" class="theme-color iconfont icon-shang1" style="font-size: 40rpx;">
						</view>
						<view v-else class="text-low iconfont icon-xia1" style="font-size: 40rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-row" style="margin-top: 20px;width: 100%;padding: 10px 0;border-bottom: 1px solid #D9D9D9;"
			v-for="(item,index) in team.teamMemberList" :key="index">
			<image :src="item.avatar?imgURL2+item.avatar:'../../static/image/logo.png'"
				style="width: 90px;height:90px; border-radius: 50%">
			</image>
			<view class="margin-left-lg">
				<view class="text-bold text-df" style="line-height: 22px;">姓名：{{item.userName}}</view>
				<view class="text-df text-low" style="line-height: 25px;">工作单位： {{item.company}} </view>
				<view class="text-df text-low" style="line-height: 25px;">加入时间： {{item.joinDatetime}}</view>
				<view class="text-df text-low" style="line-height: 25px;">工作时长： {{item.workHours}}小时</view>
			</view>
		</view>
		<!-- 分割线 -->
		<divider marginTop="40px" marginBottom="40px"></divider>

	</view>
	<view style="position: fixed;z-index: 2;width: 100%;" :style="{bottom:bottomSafeArea+'px'}">
		<button v-if="team.status==1" class="margin-right-com" type="default" size="mini"
			style="color:#fff;width: 100%;height: 44px;line-height: 44px;font-size: 18px;background-color: #999;">已加入</button>
		<button v-else-if="team.status==0" class="margin-right-com" type="default" size="mini"
			style="color:#fff;width: 100%;height: 44px;line-height: 44px;font-size: 18px;background-color: #999;">申请中</button>
		<button v-else class=" margin-right-com" type="default" size="mini"
			style="letter-spacing: 0em; color:#fff;width: 100%;height: 44px;line-height: 44px;background-color: #DE483D;font-size: 18px;"
			@click="applyAdd()">申请加入</button>
	</view>
	<!-- 接口请求加载动画 -->
	<loading></loading>
</template>

<script setup lang="ts">
	import { onLoad, onReachBottom } from "@dcloudio/uni-app"
	import { imgURL2 } from '../../api/request';
	import { imgURL3 } from '../../api/request'
	import {
		reactive,
		ref
	} from 'vue';
	import { getTeamMemberList, applyTeam } from "../../api/team/team";
	// 底部安全距离
	const bottomSafeArea = uni.getStorageSync('bottomSafeArea')
	const open = ref([
		{
			name: '加入时间',
			value: '0',
			isAsc: false
		},
		{
			name: '工时',
			value: '0',
			isAsc: false
		}
	])

	let team = reactive({
		teamName: "",
		volunteerCount: "",
		teamMemberList: [],
		status: null
	})

	const param = reactive({
		current: 1,
		size: 6,
		teamId: null,
		volunteerName: "",
		orderByJoinDateDesc: false,
		orderByWorkHourDesc: false
	})
	// 申请加入队伍接口参数
	const applyMsg = ref({
		teamId: null,
	})

	onLoad((option) => {
		param.teamId = option.teamId
		applyMsg.value.teamId = option.teamId
		team.teamName = option.name
		team.volunteerCount = option.count
		team.status = option.status
		console.log(team.status == 0)
		//请求数据
		getList()
		// 底部安全距离计算
		// getBottomSafeArea()
	})

	//触底刷新
	onReachBottom(() => {
		param.current++
		getTeamMemberList(param).then((res : any) => {
			for (let i = 0; i < res.data.teamMemberList.length; i++) {
				team.teamMemberList.push(res.data.teamMemberList[i])
			}
		})
	})
	//请求队伍列表数据
	const getList = () => {
		param.current = 1
		console.log('param' + JSON.stringify(param))
		getTeamMemberList(param).then((res : any) => {
			console.log('数据', res.data)
			// team.teamName = res.data.teamName
			// team.volunteerCount = res.data.volunteerCount
			team.teamMemberList = res.data.teamMemberList
		})
	}
	// 根据时间、工时筛选
	const change_select = async (index : number) => {
		if (index == 0) {
			open.value[index].isAsc = !open.value[index].isAsc
			param.orderByJoinDateDesc = open.value[index].isAsc
		} else if (index == 1) {
			open.value[index].isAsc = !open.value[index].isAsc
			param.orderByWorkHourDesc = open.value[index].isAsc
		}
		getList()
	}


	//取消搜索
	const cancel_search = () => {
		param.volunteerName = ''
		getList()
	}
	// 申请加入
	const applyAdd = () => {
		if(uni.getStorageSync('role')==0){
			uni.showToast({
				title: '请先加入志愿者',
				duration: 2000
			});
		}else{
			uni.showModal({
				content: '是否确定加入该志愿队伍',
				success: function (res) {
					if (res.confirm) {
						applyTeam(applyMsg.value).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '申请成功！等待审核~',
									icon: 'none',
									duration: 1000
								});
								team.status = 0
								getList()

							}
						})
					} else if (res.cancel) {
						uni.showToast({
							title: '取消申请',
							icon: 'none',
							duration: 1000
						});
					}
				}
			});
			}


	}
	// 底部安全距离计算
	const getBottomSafeArea = async () => {
		const result = wx.getSystemInfoSync()
		console.log('底部安全距离计算' + JSON.stringify(result))
		// 获取菜单按钮（右上角胶囊按钮）的布局位置信息
		const capsuleInfo = wx.getMenuButtonBoundingClientRect()
		// 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度
		const navbarHeight = (capsuleInfo.top - result.statusBarHeight) * 4 + capsuleInfo.height
		// 写入胶囊数据
		result.capsuleInfo = capsuleInfo;
		// 安全区域
		const safeArea = result.safeArea
		// 可视区域高度 - 适配横竖屏场景
		const screenHeight = Math.max(result.screenHeight, result.screenWidth)
		const height = Math.max(safeArea.height, safeArea.width)
		// 状态栏高度
		const statusBarHeight = result.statusBarHeight
		// 获取底部安全区域高度（全面屏手机）
		if (safeArea && height && screenHeight) {
			result.bottomSafeHeight = screenHeight - height - statusBarHeight
			bottomSafeArea.value = result.bottomSafeHeight
			if (result.bottomSafeHeight < 0) {
				result.bottomSafeHeight = 0
				bottomSafeArea.value = result.bottomSafeHeight
			}
		}
		console.log('底部安全' + bottomSafeArea.value)
	}
</script>

<style lang="scss" scoped>
	.second {
		//右对齐
		margin-left: auto;
		margin-top: 20rpx;
	}
</style>